<template>
  <div
    class="modal"
    :class="{hide: !isOpen}"
  >
    <div class="header">
      <div class="header-title">{{ $t('市场') }}</div>
      <div
        class="header-close"
        @click="hide"
      >✕</div>
    </div>
    <div class="tabbar">
      <div
        v-for="(coin, index) in tabList"
        :key="coin"
        class="tabbar-item"
        :class="{active: activeIndex === index}"
        @click="switchTab(index)"
      >{{ coin }}</div>
    </div>
    <div class="list">
      <div
        v-for="item in listData"
        :key="item.name"
        class="row"
        @click="changeSymbol(item.name)"
      >
        <div class="row-name">{{ `${item.stock}/${item.money}` }}</div>
        <div class="row-desc">({{ $t('maker_fee') }}:{{ item.maker_fee }}, {{ $t('taker_fee') }}:{{ item.taker_fee }})</div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapState, mapGetters, mapActions } from 'vuex'
export default {
  data () {
    return {
      isOpen: false,
      activeIndex: 0
    }
  },
  computed: {
    ...mapState({
      symbol: ({ exchange }) => exchange.symbol
    }),
    ...mapGetters({
      coinPairInfoByMoney: 'market/coinPairInfoByMoney'
    }),
    tabList () {
      return Object.keys(this.coinPairInfoByMoney)
    },
    listData () {
      return this.coinPairInfoByMoney[this.tabList[this.activeIndex]]
    }
  },
  methods: {
    ...mapActions({
      setSymbol: 'exchange/setSymbol'
    }),
    show () {
      this.isOpen = true
    },
    hide () {
      this.isOpen = false
    },
    switchTab (index) {
      this.activeIndex = index
    },
    changeSymbol (symbol) {
      if (this.symbol === symbol) {
        this.hide()
        return
      }
      this.setSymbol(symbol)
      const { tab } = this.$route.query
      this.$router.replace(`?symbol=${symbol}&tab=${tab || 0}`)
      this.hide()
    }
  }
}
</script>
<style scoped>
.modal {
  z-index: 999;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: white;
}
.modal.hide {
  display: none;
}
.header {
  position: relative;
  top: 0;
  height: 50px;
}
.header-title {
  text-align: center;
  font-size: 15px;
  line-height: 50px;
}
.header-close {
  position: absolute;
  top: 0;
  left: 0;
  font-size: 20px;
  text-align: center;
  width: 50px;
  line-height: 50px;
  color: #ccc;
}
.tabbar {
  padding: 0 6px 0 6px;
  border-bottom: 1px solid #f0f3f8;
}
.tabbar-item {
  display: inline-block;
  width: 80px;
  border-bottom: 2px solid transparent;
  padding: 10px 0;
  text-align: center;
  position: relative;
  bottom: -1px;
}
.tabbar-item.active {
  color: #1b8afe;
  border-bottom: 2px solid #1b8afe;
}

.list {
  height: calc(100vh - 88px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0 6px;
}
.row {
  display: flex;
  align-items: center;
  height: 48px;
  border-bottom: 1px solid #f0f3f8;
}
.row-name {
  font-size: 16px;
}
.row-desc {
  margin-left: 4px;
  font-size: 12px;
  color: #aaa;
}
</style>
